<%--
    Document   : register
    Created on : 11 Okt 11, 1:20:25
    Author     : Agus
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Form Registrasi</title>
        <style type="text/css">
            @import url("defaultCopy.css");

        /* All form elements are within the definition list for this example */
        dl {
                font:normal 12px/15px Arial;
            position: relative;
            width: 350px;
        }
        dt {
            clear: both;
            float:left;
            width: 130px;
            padding: 4px 0 2px 0;
            text-align: left;
        }
        dd {
            float: left;
            width: 200px;
            margin: 0 0 8px 0;
            padding-left: 6px;
        }


        /* The hint to Hide and Show */
        .hint {
                display: none;
            position: absolute;
            right: -250px;
            width: 200px;
            margin-top: -4px;
            border: 1px solid #c93;
            padding: 10px 12px;
            /* to fix IE6, I can't just declare a background-color,
            I must do a bg image, too!  So I'm duplicating the pointer.gif
            image, and positioning it so that it doesn't show up
            within the box */
            background: #ffc url(pointer.gif) no-repeat -10px 5px;
        }

        /* The pointer image is hadded by using another span */
        .hint .hint-pointer {
            position: absolute;
            left: -10px;
            top: 5px;
            width: 10px;
            height: 19px;
            background: url(pointer.gif) left top no-repeat;
        }
        </style>
        <script type="text/javascript">
        function addLoadEvent(func) {
          var oldonload = window.onload;
          if (typeof window.onload != 'function') {
            window.onload = func;
          } else {
            window.onload = function() {
              oldonload();
              func();
            }
          }
        }

        function prepareInputsForHints() {
                var inputs = document.getElementsByTagName("input");
                for (var i=0; i<inputs.length; i++){
                        // test to see if the hint span exists first
                        if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
                                // the span exists!  on focus, show the hint
                                inputs[i].onfocus = function () {
                                        this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                                }
                                // when the cursor moves away from the field, hide the hint
                                inputs[i].onblur = function () {
                                        this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                                }
                        }
                }
                // repeat the same tests as above for selects
                var selects = document.getElementsByTagName("select");
                for (var k=0; k<selects.length; k++){
                        if (selects[k].parentNode.getElementsByTagName("span")[0]) {
                                selects[k].onfocus = function () {
                                        this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                                }
                                selects[k].onblur = function () {
                                        this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                                }
                        }
                }
        }
        addLoadEvent(prepareInputsForHints);
                </script>
        <script>
    function cekForm() {

        if (document.fValidate.nama.value == "") {
            //alert("Nama tidak boleh kosong");
            document.forms['fValidate'].nama.focus();
            return false;

        } else if
            (document.fValidate.alamat.value == "") {
            //alert("Alamat tidak boleh kosong");
            document.forms['fValidate'].alamat.focus();
            return false;
            for (i=0)
        } else if
        (document.fValidate.telepon.value == "") {
            //alert("Telepon tidak boleh kosong dan harus angka");
            document.forms['fValidate'].telepon.focus("");
            return false;

        } else if
             (document.fValidate.email.value == "") {
            //alert("Alamat tidak boleh kosong");
            document.forms['fValidate'].email.focus();
            return false;

             } else if
             (document.fValidate.username.value == "") {
            //alert("Alamat tidak boleh kosong");
            document.forms['fValidate'].username.focus();
            return false;
        } else if
             (document.fValidate.password.value == "") {
            //alert("Alamat tidak boleh kosong");
            document.forms['fValidate'].password.focus();
            return false;
        }  else {
            document.fValidate.submit();
        }
    }
</script>
             <script>
    function cekAngka() {
        var input = document.fValidate.telepon.value;
        var angka = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
        var status = true;
        for (i=0; i<=x.length-1; i++) {
            if (angka[i] in daftar) cek = true;
            else cek = false;

       status = status && cek;}
        if (status == false) {
        alert("Bukan angka");
            return false;

            } else {
            return true;
}
    }
    </script>
    </head>
    <body>

        <center><h2>Form Registrasi</h2></center>
        <br><f
        <form name ="fValidate" method="post" action="controller?page=registered" align="center" > </center
            <dl>
                <dt>
                Nama :
                </dt>
                <dd>
                    <input  type="text" name="nama" class="required" minlength="2"/>
                    <span class="hint">Nama harus diisi<span class="hint-pointer">&nbsp;</span></span>
                </dd>
                <br><br>
                <dt>
                Alamat :
                </dt>
                <dd>
                    <input  type="text" name="alamat" class="required"/>
                    <span class="hint">Alamat harus diisi<span class="hint-pointer">&nbsp;</span></span>
                </dd>
                <br><br>
                <dt>
                Telepon :
                </dt>
                <dd>
                <input type="text" name="telepon" value="0123456789" />
      <span class="hint">Contoh : 6285 - XX<span class="hint-pointer">&nbsp;</span></span>
    </dd>
                <br><br>
                <dt>
                Email :
                </dt>
                <dd>
                <input type="text" name="email" />
      <span class="hint">Contoh email : XXX@xxx.com<span class="hint-pointer">&nbsp;</span></span>
    </dd>
                <br><br>
                <dt>
                Username :
                </dt>
                <dd>
                <input type="text" name="username" />
      <span class="hint">username yang Anda gunakan dalam Sign in<span class="hint-
pointer">&nbsp;</span></span>
    </dd>
                <br><br>
                <dt>
                Password :
                <dd>
               <input type="password" name="password" />
      <span class="hint">password Anda saat melakukan Sign in<span class="hint-pointer">&nbsp;</span></span>
    </dd>
               <br><br>
                <input type="submit" value="Submit" onclick="return cekForm()" />
            </dl>
        </form>

    </body>
</html>
